<template>
	<uni-popup ref="popup">
		<view class="popup-content">
			<view class="title">
				{{$t('deposit-popup.title')}}
				<span>({{$t('deposit-popup.desc')}}{{forever_coin}}{{$t('user.gold1')}}, {{$t('deposit-popup.desc2')}})</span>
			</view>
			<view class="input">
				<input v-model="nums" type="text" :placeholder="$t('deposit-popup.pla')">
				<image src="@/static/gold.png"></image>
			</view>
			<view class="bottom">
				<view class="button cancel" @click="cancel">{{$t('cancel')}}</view>
				<view class="button" @click="convertCoinToMoney">{{$t('confirm')}}</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import utils from '@/utils/util.js'
	export default {
		data() {
			return {
				nums: '',
				forever_coin: ''
			}
		},
		methods: {
			open() {
				this.getUserCoinAmount()
				this.$refs.popup.open()
			},
			cancel() {
				this.nums = ''
				this.$refs.popup.close()
			},
			convertCoinToMoney() {
				uni.request({
					url: this.configs.webUrl + '/api/user_coin/convertCoinToMoney',
					data: {
						token: uni.getStorageSync('userinfo').token,
						nums: this.nums,
						lang: 'wwe'
					},
					success: res => {
						console.log(res);
						if(res.data.code == 1) {
							this.$emit('change')
							this.cancel()
						}
						utils.toast(res.data.msg)
					}
				})
			},
			getUserCoinAmount() {
				uni.request({
					url: this.configs.webUrl + '/api/user_coin/getUserCoinAmount',
					data: {
						token: uni.getStorageSync('userinfo').token
					},
					success: res => {
						console.log(res);
						this.forever_coin = res.data.data.forever_coin
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;
		width: 90vw;

		.title {
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(247, 85, 129, 0.31) 100%);
			height: 110rpx;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #D93562;
			padding-left: 20rpx;
			span {
				font-size: 20rpx;
				font-weight: 400;
			}
		}

		.input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F0F0F0;
			padding: 20rpx;
			margin: 40rpx 20rpx;

			input {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
			}

			image {
				width: 36rpx;
				height: 38rpx;
			}
		}

		.bottom {
			width: 90%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.button.cancel {
				background: #EBEBEB;
				color: #C1B7B7;
			}

			.button {
				border-radius: 50rpx;
				width: 48%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 84rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				background: #F75581;
			}
		}
	}
</style>